<template>
    <el-drawer
    v-model="show"
    title="产品详情"
    size="50%"
    :before-close="handleClose"
    destroy-on-close
  >
  <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="资产信息" name="1">
        <property />
      </el-collapse-item>
      <el-collapse-item title="采购信息" name="2">
        <purchase />
      </el-collapse-item>
      <el-collapse-item title="服务信息" name="3">
        <service />
      </el-collapse-item>
      <el-collapse-item title="安全信息" name="4">
        <secure />
      </el-collapse-item>
      <el-collapse-item title="维保信息" name="5">
        <maintenance />
      </el-collapse-item>
      <el-collapse-item title="配置信息" name="6">
        <configuration />
      </el-collapse-item>
    </el-collapse>
  </el-drawer>
</template>

<script setup>
import {ref} from 'vue'
import property from './property.vue'
import purchase from './purchase.vue'
import service from './service.vue'
import secure from './secure.vue'
import maintenance from './maintenance.vue'
import configuration from './configuration.vue'
const show = ref(false)
const openDrawer = ()=>{
    show.value = true
}

defineExpose({
    openDrawer
});
</script>

<style lang="scss" scoped>

</style>